<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="list">

    </ul>
    <script>
        // 不缓存 DOM 查询结果
        for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
            // 每次循环，都会计算 length ，频繁进行 DOM 查询
        }
        // 缓存 DOM 查询结果
        const pList = document.getElementsByTagName('p');
        const length = pList.length;
        for (let i = 0; i < length; i++) {
            // 缓存 length，只进行一次 DOM 查询
        }

        // 将频繁操作改为一次性操作

        // 下为频繁操作
        const list = document.getElementById('list');
        for (let i = 0; i < 10; i++) {
            const li = document.createElement('li');
            li.innerHTML = `List item ${i}`;
            list.appendChild(li);
        }

        // 下为一次操作
        // 先建一个文件片段，即：游离于DOM结构之外的，不在JS内存中的，不会影响DOM性能，因为没有进行渲染，只是对JS变量进行操作。一块插入完之后再插入到list之中，将高频插入都放入临时片段中进行插入，插入完之后再将临时区域一起放到DOM结构中，这样就会提升性能

        //  创建一个文档片段，此时还没有插入到DOM结构中
        const frag = document.createDocumentFragment();
        for (let i = 0; i < 10; i++) {
            const li = document.createElement('li');
            li.innerHTML = `List item ${i}`;

            // 先插入文档片段中
            frag.appendChild(li)
        }
        // 都完成之后，再统一插入到 DOM 结构中
        list.appendChild(frag);
    </script>
</body>

</html>